// 导入插件
const eslintP = require('eslint-webpack-plugin');

const htmlP = require('html-webpack-plugin');

const {resolve} = require('path');

module.exports = {
    // 多入口 数组导入
    // entry:['./src/main.js','./src/app.js'],
    // 多入口，多出口
    entry: {
        a: "./src/main.js",
        b: './src/app.js'
    },
    // 单出口
    // output:{
    //     path:__dirname+"/build",
    //     filename:'./js/main.js',
    //     clean:true
    // },
    // 多出口
    // hash 项目hash
    // contenthash 文件hash
    output: {
        path: resolve(__dirname ,"./build"),
        filename: './js/[name].js',
        clean: true,
        publicPath: '/'
    },
    // 配置loader
    module: {
        rules: [
            // 配置 css 文件处理
            {
                test: /\.css$/, // 处理css文件
                // 从后往前执行
                use: [
                    "style-loader",		// 将 CSS 生成 style 标签插入 HTML 中
                    "css-loader"  		// 将 CSS 转为 CommonJS 的模块
                ]
            },
            // 配置 less 文件处理
            {
                test: /\.less$/, // 处理less文件
                use: [
                    'style-loader', // 将 CSS 生成 style 标签插入 HTML 中
                    'css-loader', // 将 CSS 转为 CommonJS 的模块
                    'less-loader' // 将Less编译为CSS
                ]
            },
            //配置 babel 的 loader
            {
                test: /\.js$/,
                exclude: /node_modules/, // 不进行处理的文件夹
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: [
                            ['@babel/preset-env',
                                {
                                    useBuiltIns: 'usage', // 只打包使用的ES6新API的实现代码
                                    corejs: { version: 2 } // 指定core-js的版本号为2
                                }
                            ]
                        ], // 指定bebel预设包
                    }
                }
            },
            // 处理图片
            {
                test: /\.(jpg|png|gif)$/,
                type: "asset",
                // 解析器
                parser: {
                    // 指定进行图片base64编码最大文件大小
                    dataUrlCondition: {
                        maxSize: 5 * 1024, // 5kb    默认8k
                    }
                },
                // 打包生成的文件 - 生成器
                generator: {
                    filename: 'images/[name]-[hash:8][ext]',
                },
            },
            // 配置 html 的 loader
            {
                test: /\.(html)$/,
                use: {
                    loader: 'html-loader'
                }
            },
            // 打包字体图标
            {
                test: /\.(eot|svg|woff|woff2|ttf)$/,
                type: 'asset',
                // 解析器
                parser: {
                    // 指定进行base64编码最大文件大小
                    dataUrlCondition: {
                        maxSize: 2 * 1024, // 5kb
                    }
                },
                generator: {
                    filename: 'fonts/[name][ext]',
                },
            },
        ]
    },
    // 插件调用
    plugins: [
        new eslintP(),
        // 打包html
        new htmlP({
            template: "./public/index.html",// 指定html模板文件。
            filename: "index.html", //默认为index.html
            inject: "body",// 将打包生成的JS文件放置在body尾部
            hash: true,// 在引入JS时增加hash后缀字符串,去除缓存。
            minify: {
                removeAttributeQuotes: true,// 移除属性中的双引号
                removeComments: true,// 移除注释
                collapseWhitespace: true,// 去除空格与换行
            }
        })
    ],
    mode: "development",
    devServer:{
        host:'127.0.0.2', //主机地址
        port:80,// 设置端口号
        open:true,// 自动在浏览器中打开页面
    },
    // 开启sourceMap调试
	devtool: 'cheap-module-source-map'  //只有行 - 快
    
}